<script setup lang="ts">
function toShopOrder() {
  uni.navigateTo({
    url: '/pages/shopOrder/index',
  })
}
</script>

<template>
  <view class="home-page box-border px-4 pb-4">
    <AppStatusBar bg-color="transparent" />
    <!-- title start -->
    <ShopTitleBar title="大鸭梨餐厅(上地店)" color="#ffff" />
    <!-- title end -->
    <!-- statistics start -->
    <view class="mt-4 rounded-lg bg-white p-4 shadow-black">
      <view class="flex items-center justify-between">
        <view class="flex flex-col items-center">
          <text class="text-lg font-bold">营业概况</text>
          <view class="h-1 w-6 rounded-sm bg-[#FF3A3A]" />
        </view>
        <view class="i-icon-park-outline-help text-[#aaaaaa]" />
      </view>
      <view class="grid grid-cols-2 mt-4 gap-2">
        <navigator>
          <view class="flex flex-col rounded-[5px] bg-[#F8F8F7] p-2">
            <wd-text text="今日营业额" size="12px" />
            <wd-text text="245400" color="#333333" bold size="20px" class="mt-1" />
          </view>
        </navigator>
        <view class="flex flex-col rounded-[5px] bg-[#F8F8F7] p-2">
          <wd-text text="今日订单量" size="12px" />
          <wd-text text="150" color="#333333" bold size="20px" class="mt-1" />
        </view>
        <view class="flex flex-col rounded-[5px] bg-[#F8F8F7] p-2">
          <wd-text text="昨日营业额" size="12px" />
          <wd-text text="245400" color="#333333" bold size="20px" class="mt-1" />
        </view>
        <view class="flex flex-col rounded-[5px] bg-[#F8F8F7] p-2">
          <wd-text text="昨日订单量" size="12px" />
          <wd-text text="150" color="#333333" bold size="20px" class="mt-1" />
        </view>
        <view class="flex flex-col items-center rounded-[5px] bg-[#F8F8F7] p-2">
          <view class="i-icon-park-outline-plus text-[#333333]" />
          <wd-text text="自定义" size="12px" />
        </view>
      </view>
      <view class="mt-4 flex items-center justify-between">
        <wd-text text="营业时间开始于 00:00:00" size="12px" />
        <navigator url="/pages/statistics/index">
          <view class="flex items-center">
            <wd-text text="查看营业概况" size="12px" color="#FF3A3A" />
            <view class="i-icon-park-outline-right ml-1 text-[12px] text-[#FF3A3A]" />
          </view>
        </navigator>
      </view>
    </view>
    <!-- statistics end -->
    <!-- operation start  -->
    <view class="mt-4">
      <wd-grid bg-color="transparent" clickable>
        <wd-grid-item icon="picture" text="店内订单详情" @itemclick="toShopOrder" />
        <wd-grid-item icon="picture" text="手机点餐设置" />
        <wd-grid-item icon="picture" text="菜品管理" />
        <wd-grid-item icon="picture" text="更多" />
      </wd-grid>
    </view>
    <!--  operation end  -->
    <!--    report start -->
    <CardBar title="常用报表" class="mt-4">
      <template #expansion>
        <view class="flex items-center">
          <wd-text text="全部报表" size="12px" color="#FF3A3A" />
          <view class="i-icon-park-outline-right ml-1 text-[12px] text-[#FF3A3A]" />
        </view>
      </template>
      <view class="grid grid-cols-2 mt-4 gap-2 gap-row-4 px-4">
        <view class="flex items-center">
          <wd-icon name="picture" size="22px" />
          <wd-text text="实时营业统计" class="ml-2" color="#333333" />
        </view>
        <view class="flex items-center">
          <wd-icon name="picture" size="22px" />
          <wd-text text="菜品销售统计" class="ml-2" color="#333333" />
        </view>
        <view class="flex items-center">
          <wd-icon name="picture" size="22px" />
          <wd-text text="运营" class="ml-2" color="#333333" />
        </view>
      </view>
    </CardBar>
    <!--   report end -->
  </view>
  <app-tab-bar value="home" />
</template>

<route type="home" lang="json5">
{
  layout: 'tabar',
}
</route>

<style scoped lang="scss">
.home-page {
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
  background: linear-gradient(to bottom, #ff3535, #f5f9fa, #f5f9fa) no-repeat;
  background-size: 100% 100%;
}
</style>
